﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-sm-12">
            <p>
               Pinterest view is built using the Masonry JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet such as the <a href="http://blogs.office.com/">Office Blog</a>
                <br />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Featured screenshots</h3>
        </div>
        <div class="col-sm-8">
            <img src="../lists/Templates/beta/pinterestview/content/imgs/featured.png" class="img-thumbnail" alt="featured screenshot" title="featured screenshot" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Supported browsers</h3>
        </div>
        <div class="col-sm-10">
            <ul class="list-group">
                <li class="list-group-item">
                    <span class="badge">v8+</span>
                    Internet Explorer
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Firefox
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Google Chrome
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Safari
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Opera
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Required List columns</h3>
            <p>This template can be applied on list views that have the following columns:</p>
        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th class='col-sm-2'>Template Field</th>
                        <th class='col-sm-4'>Type</th>
                        <th class='col-sm-3'>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>fldTitle</td>
                        <td>Single line of text</td>
                        <td>Post title</td>
                    </tr>
                    <tr>
                        <td>fldURL</td>
                        <td>Hyperlink or Picture (Hyperlink)</td>
                        <td>Post link</td>
                    </tr>
                    <tr>
                        <td>fldImage</td>
                        <td>Hyperlink or Picture (Picture)</td>
                        <td>Post thumbnail </td>
                    </tr>
                    <tr>
                        <td>fldDescription</td>
                        <td>Multiple lines (Enhanced rich text)</td>
                        <td>Post description</td>
                    </tr>
                    <tr>
                        <td>fldByLine</td>
                        <td>Single line of text</td>
                        <td>Post ByLine (category)</td>
                    </tr>
                    <tr>
                        <td>fldDate</td>
                        <td>Date</td>
                        <td>Post published date</td>
                    </tr>
                    <tr>
                        <td>fldAuthor</td>
                        <td>User</td>
                        <td>Post author</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-sm-12">
            <blockquote class="border-info">
                <p class="text-info">Info</p>
                <p><h5>This template fits with Sharepoint columns of <b>Article Page</b> content type.</h5></p>
            </blockquote>
        </div>
        <div class="col-sm-12">
            <blockquote class="border-info">
                <p class="text-info">Info</p>
                <p><h5>If you have different column names you can change them from the <b>Apply</b> tab and change field mappings from the <b>Fields Mapping section</b>.</h5></p>
            </blockquote>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Settings</h3>
            <p>This template has the following settings to play with. Below are the available settings with all options and their default values:</p>
        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th class='col-sm-3'>Setting</th>
                        <th class='col-sm-3'>Defualt</th>
                        <th class='col-sm-6'>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>width</td>
                        <td>100%</td>
                        <td>Main area width size</td>
                    </tr>
                    <tr>
                        <td>gutter</td>
                        <td>10</td>
                        <td>The horizontal space between item elements</td>
                    </tr>
                    <tr>
                        <td>isOriginLeft</td>
                        <td>true</td>
                        <td>SControls the horizontal flow of the layout. By default, item elements start positioning at the left, Set to false for right-to-left layouts</td>
                    </tr>
                    <tr>
                        <td>isOriginTop</td>
                        <td>true</td>
                        <td>Controls the vertical flow of the layout. By default, item elements start positioning at the top. Set to false for bottom-up layouts</td>
                    </tr>
                    <tr>
                        <td>transitionDuration</td>
                        <td>0.5s</td>
                        <td>Duration of the transition when items change position or appearance, set in a CSS time format</td>
                    </tr>
                    <tr>
                        <td>cardWidth</td>
                        <td>380px</td>
                        <td>Post card width</td>
                    </tr>
                    <tr>
                        <td>cardMarginBottom</td>
                        <td>10px</td>
                        <td>Post card bottom space (margin)</td>
                    </tr>
                    <tr>
                        <td>thumbRenditionID</td>
                        <td>3</td>
                        <td>SP rendition ID of thumbnail image. <b>For aligment purposes, you should create new rendition to make all images have the same size</b></td>
                    </tr>
                    <tr>
                        <td>thumbWidth</td>
                        <td>100%</td>
                        <td>Thumbnail image width</td>
                    </tr>
                    <tr>
                        <td>thumbHeight</td>
                        <td>150px</td>
                        <td>Thumbnail image height</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Credit</h3>
            <p>The following libraries were used to help creating this template:</p>
        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <tbody>
                    <tr>
                        <td><a href="http://masonry.desandro.com/" target="_blank">Masonry Grid</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

























































